import G6 from '@antv/g6';
import startShape from '@/components/FlowDrawer/shapes/startShape';
import endShape from '@/components/FlowDrawer/shapes/endShape';
import userTaskShape from '@/components/FlowDrawer/shapes/userTaskShape';

const shapes = [
  startShape,
  userTaskShape,
  endShape
];

export default {
  createGraph(container) {
    let graph = new G6.Graph({
      renderer: 'svg',
      width: container.offsetWidth,
      height: container.offsetHeight,
      container: container,
      layout: {
        rankdir: 'LR', // 可选，默认为图的中心
        align: 'DL', // 可选
        nodesep: 20, // 可选
        controlPoints: true, // 可选
        type: 'dagre',
        ranksep: 50,
      },
      modes: {
        default: [
          'drag-canvas',
          'zoom-canvas',
          'click-select',
        ],
      },
    })
    this.registerShapes(G6, graph);
    return graph;
  },
  registerShapes(G6, graph) {
    shapes.forEach(s => s.register(G6, graph));
  }
};